<template>
	<view class="uni-rate">
		<view class="uni-rate-icon" v-for="(star,index) in stars" :key="index" :style="{marginLeft:margin+'px'}" @click="onClick(index,$event)">
			<custom-icons :size="size" :color="color" :type="isFill === false || isFill === 'false' ? 'star' : 'star-filled'"></custom-icons>
			<!-- <uni-icon :size="size" :color="color" :type="isFill === false || isFill === 'false' ? 'star' : 'star-filled'"></uni-icon> -->
			<view class="uni-rate-icon-on" :style="{width:star.activeWitch}">
				<custom-icons :size="size" :color="activeColor" type="star-filled"></custom-icons>
				<!-- <uni-icon :size="size" :color="activeColor" type="star-filled"></uni-icon> -->
			</view>
		</view>
	</view>
</template>

<script>
	import customIcons from '../custom-icons/custom-icons.vue'
	// import uniIcon from '../uni-icon/uni-icon.vue'
	export default {
		name: "uni-rate",
		components: {
			// uniIcon
			customIcons
		},
		props: {
			index:{
				type: Number,
				default: 0
			},
			isFill: { //星星的类型，是否镂空
				type: [Boolean, String],
				default: true
			},
			color: { //星星的颜色
				type: String,
				default: '#999999'
			},
			activeColor: { //星星选中状态颜色
				type: String,
				default: '#ff8a00'
			},
			size: { //星星的大小
				type: [Number, String],
				default: 24
			},
			value: { //当前评分
				type: [Number, String],
				default: 0
			},
			max: { //最大评分
				type: [Number, String],
				default: 5
			},
			margin: { //星星的间距
				type: [Number, String],
				default: 0
			},
			disabled: { //是否可点击
				type: [Boolean, String],
				default: false
			}
		},
		computed: {
			stars() {
				const max = Number(this.max) ? Number(this.max) : 5
				const value = Number(this.value) ? Number(this.value) : 0
				const starList = []
				const floorValue = Math.floor(value)
				const ceilValue = Math.ceil(value)
				for (let i = 0; i < max; i++) {
					if (floorValue > i) {
						starList.push({
							activeWitch: '100%'
						})
					} else if (ceilValue - 1 === i) {
						starList.push({
							activeWitch: (value - floorValue) * 100 + '%'
						})
					} else {
						starList.push({
							activeWitch: '0'
						})
					}
				}
				return starList
			}
		},
		methods: {
			onClick(index,e) {
				console.log(e)
				if (this.disabled === true || this.disabled === 'true') {
					return
				}
				var val = index + 1
				this.$emit('change', {
					value: val,
					index: this.index
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-rate {
		line-height: 0;
		font-size: 0;
		display: flex;
		flex-direction: row;

		&-icon {
			position: relative;
			line-height: 0;
			font-size: 0;
			display: inline-block;

			&-on {
				position: absolute;
				top: 0;
				left: 0;
				overflow: hidden;
			}
		}
	}
</style>
